<template>
    <div class="home">
        <!-- <div class="map">
            <Map :markerData="markerData"></Map>
        </div> -->
        <div class="top">
            <Top></Top>
        </div>
        <div class="center">
            <Center :centerDataOne="centerDataOne" :centerDataTwo="centerDataTwo"></Center>
        </div>

        <div class="left">
            <pageLeft :dataLeftOne="dataLeftOne" :dataLeftTwo="dataLeftTwo" :dataLeftThree="dataLeftThree"></pageLeft>
        </div>

        <div class="right">
            <pageRight :dataRightOne="dataRightOne" :dataRightTwo="dataRightTwo"></pageRight>
        </div>
    </div>
</template>
<script setup>
import { ref, computed, reactive } from 'vue'
import Center from '@/pages/compontents/center/index.vue'
import pageLeft from '@/pages/compontents/left/index.vue'
import pageRight from '@/pages/compontents/right/index.vue'
import Top from '@/components/top/index.vue'
import { color } from 'echarts'
// const input3 = ref('')
// 左一侧数据
let obj1 = {
    title: '应急统计力量',
    titleTwo: {
        name: '应急力量总人数',
        num: 398
    },
    dataList: [
        { name: '医护人员', num: 888, img: '' },
        { name: '消防人员', num: 888, img: '' },
        { name: '警备人员', num: 888, img: '' },
        { name: '救援队伍', num: 888, img: '' },
        { name: '网格员', num: 888, img: '' },
        { name: '保障机构', num: 888, img: '' },
    ]
}
let dataLeftOne = reactive({ obj1 })
// 左二侧数据
let obj2 = {
    title: '应急资源力量',
    btn: ['人员', '车辆', '物资'],
    dataList: [
        {
            name: '穆沟村',
            people: {
                on: 23,
                off: 45,
                count: 68,
            },
            car: {
                on: 23,
                off: 45,
                count: 68,
            },
            material: {
                on: 12,
                off: 45,
                count: 68,
            }
        },
        {
            name: '穆沟村',
            people: {
                on: 26,
                off: 45,
                count: 68,
            },
            car: {
                on: 26,
                off: 45,
                count: 68,
            },
            material: {
                on: 12,
                off: 45,
                count: 68,
            }
        },
        {
            name: '穆沟村',
            people: {
                on: 18,
                off: 45,
                count: 68,
            },
            car: {
                on: 12,
                off: 45,
                count: 68,
            },
            material: {
                on: 12,
                off: 45,
                count: 68,
            },
        },
        {
            name: '穆沟村',
            people: {
                on: 18,
                off: 45,
                count: 68,
            },
            car: {
                on: 12,
                off: 45,
                count: 68,
            },
            material: {
                on: 12,
                off: 45,
                count: 68,
            },
        },]
}
let dataLeftTwo = reactive({ obj2 })
let obj3 = {
    title: '重点防护对象列表',
    listTr: ["时间", "人员类型", "地点"],
    listTd: [
        {
            time: '2024/03/24',
            type: '人员',
            place: '地点2'
        },
        {
            time: '2024/03/24',
            type: '人员',
            place: '地点1'
        },
        {
            time: '2024/03/24',
            type: '人员',
            place: '地点3'
        },
        {
            time: '2024/03/24',
            type: '人员',
            place: '地点3'
        },
        {
            time: '2024/03/24',
            type: '人员',
            place: '地点3'
        },
    ]
}
let dataLeftThree = reactive({ obj3 })
let objR1 = {
    title: '预警人员---设备统计',
    barOptions: {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['摄像头', '雨量采集器', '压力传感器', '网格人员',]
        },
        tooltip: {
            trigger: 'axis',
        },
        dataZoom: [
            // {
            //     startValue:'2014-06-01'
            // },
            // {
            //     type: 'inside',
            //     // start: 1,      // 左边在 10% 的位置。
            //     // end: 100 ,
            //     // show: true
            // }
        ],
        yAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    type: 'solid'
                }
            }
        },
        legend: {
            show: true,
            right: '20%',
            icon: 'circle',
            textStyle: {
                color: '#fff'
            }
        },
        series: [
            {
                data: [82, 93, 90, 93, 92, 90, 42],
                type: 'line',
                name: '在线',
                areaStyle: {},
                smooth: true,
                symbol: 'none'
            },
            {
                data: [20, 73, 40, 34, 90, 30, 30],
                type: 'line',
                areaStyle: {},
                name: '离线',
                smooth: true,
                symbol: 'none'
            }
        ]
    }
}
let dataRightOne = reactive({ objR1 })
let objR2 = {
    title: '实时预警统计',
    btnList: ['历史预警', '当前预警'],
    listData: {
        listTop: ['地点', '报告类型', '时间', '说明'],
        listMain: [
            { place: '窑洞和平方', type: '一般', time: '2024/3/12', detail: '详情' },
            { place: '窑洞和平方', type: '一般', time: '2024/3/12', detail: '详情' },
            { place: '窑洞和平方', type: '一般', time: '2024/3/12', detail: '详情' },
            { place: '窑洞和平方', type: '一般', time: '2024/3/12', detail: '详情' },
            { place: '窑洞和平方', type: '一般', time: '2024/3/12', detail: '详情' },
        ],
        waringList: [
            {
                time: '2024/03/24 12:00',
                name: "时间上报"
            },
            {
                time: '2024/03/24 12:00',
                name: "时间上报"
            },
            {
                time: '2024/03/24 12:00',
                name: "时间上报"
            },
            {
                time: '2024/03/24 12:00',
                name: "时间上报"
            },
        ]
    }
}
let dataRightTwo = reactive({ objR2 })
let objC1 = {
    dataList: [
        {
            name: '雨量采集器',
            img: ''
        },
        {
            name: '压力传感器',
            img: ''
        },
        {
            name: '摄像头',
            img: ''
        }
    ]
}
let centerDataOne = reactive({ objC1 })
let objC2 = {
    dataList: [
        {
            name: '救援人员',
            img: '',
        },
        {
            name: '救援车辆',
            img: '',
        },
        {
            name: '救援物资',
            img: '',
        },
        {
            name: '重点人员',
            img: '',
        }
    ]
}
let centerDataTwo = reactive({ objC2 })
</script>
<style scoped src="./index.css"></style>
